<!DOCTYPE html>
<html>

	<head>
		<!--头部公用信息引入-->
		@@include('../../include/metas.html')
		<title>实名认证</title>
		<!--样式引入-->
		@@include('../../include/linkcss2.html')
	</head>
	<style type="text/css">
		.webuploader-container {
			position: relative;
		}
		
		.webuploader-element-invisible {
			position: absolute !important;
			clip: rect(1px 1px 1px 1px);
			/* IE6, IE7 */
			clip: rect(1px, 1px, 1px, 1px);
		}
		
		.webuploader-pick {
			width: 1.8rem;
			height: 1.8rem;
			position: relative;
			display: inline-block;
			cursor: pointer;
			background-image: url('../../../image/bg/add_img.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-left: 0.28rem;
			color: #fff;
			text-align: center;
			border-radius: 3px;
			overflow: hidden;
		}
		.img-warp{
			float: left;
		}
		.img-warp p{
			font-size: 0.2rem;
			margin-top: 0.05rem;
			color: #666;
			margin-left: 0.6rem;
		}
		.img-warp .scid{
			margin-left: 0.3rem;
		}
		.infos{
			font-size: 12px;
			color: #bbb;
			margin-top: 0.2rem;
		}
	</style>

	<body>
		@@include('../../include/back.html')

		<section id="name">
			<div class="warp">
				<h1 class="title">身份验证</h1>
			</div>
			<div class="inp-warp">

				<div class="name pro">
					<h2>姓名</h2>
					<input type="text" placeholder="请输入姓名" class="pw" id="username" name="realname" />
				</div>
				<div class="code_id pro">
					<h2>身份证号</h2>
					<input type="text" placeholder="请输入身份证号" id="code_id" name="idcard" />
					<input type="hidden" name="mobile" id="myMobile" />
				</div>
				<div class="cma pro">
					<h2>手持身份证</h2>
					<div class="img-warp">
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker1">选择图片</div>
						<img src="" style="display: none;" class="img1 myimg" width="1.8rem" height="1.8rem">
						<p class="scid">手持身份证正面</p>
					</div>
					<div class="img-warp">
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker2">选择图片</div>
						<img src="" style="display: none;" class="img2 myimg" width="1.8rem" height="1.8rem">
						<p>身份证正面</p>
					</div>
					<div class="img-warp">
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker3">选择图片</div>
						<img src="" style="display: none;" class="img3 myimg" width="1.8rem" height="1.8rem">
						<p>身份证背面</p>
						
					</div>
					<div style="clear: both;"></div>
					<p class="infos">保存图片清晰可识别图片大小不可超过1MB建议使用QQ截图</p>

				</div>


					<input type="hidden" class="hid_img1"/>
					<input type="hidden" class="hid_img2"/>
					<input type="hidden" class="hid_img3"/>
				<div class="go-btn-reg" id="next">
					<!--//success.html-->
					<a href="javascript:;">提交</a>
				</div>
		</section>
		@@include('../../include/linkjs2.html')

		<script type="text/javascript">
			security.name();
			var imgUrl;
			jQuery(function() {
				var $ = jQuery,
					$list = $('.img-warp'),
					ratio = window.devicePixelRatio || 1,
					thumbnailWidth = 100 * ratio,
					thumbnailHeight = 100 * ratio,
					uploader;

				uploader = WebUploader.create({
					auto: true,
					swf: 'dist/Uploader.swf',
					server: hosts+'/upload.php',
					pick: '#filePicker1',
					accept: {
						title: 'Images',
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/*'
					},
					resize:false
				});
				  
				
				// 上传成功
				uploader.on('uploadSuccess', function(file, data) {	
					imgUrl = hosts+'/'+ data.url;
					console.log(imgUrl);
					$('.img1').show().attr('src', imgUrl);
					$('.hid_img1').val(data.url);
					$('.webuploader-pick').css('backgroundImg',imgUrl);
				});
							
				
				uploader = WebUploader.create({
					auto: true,
					swf: 'dist/Uploader.swf',
					server: hosts+'/upload.php',
					pick: '#filePicker2',
					accept: {
						title: 'Images',
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/*'
					},
					resize:false
				});
				
				
				// 上传成功
				uploader.on('uploadSuccess', function(file, data) {
					
					$('.hid_img2').val(data.url);
					imgUrl = hosts+'/'+ data.url;
					$('.img2').show().attr('src', imgUrl)
//					$('.webuploader-pick').css('backgroundImg',imgUrl);
				});
				
				uploader = WebUploader.create({
					auto: true,
					swf: 'dist/Uploader.swf',
					server: hosts+'/upload.php',
					pick: '#filePicker3',
					accept: {
						title: 'Images',
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/*'
					},
					resize:false
				});								
				// 上传成功
				uploader.on('uploadSuccess', function(file, data) {
					$('.hid_img3').val(data.url);
					imgUrl = hosts+'/'+ data.url;
					$('.img3').show().attr('src', imgUrl)
//					$('.webuploader-pick').css('backgroundImg',imgUrl);
				});
				

			});
		</script>

	</body>

</html>